import 'package:flutter/material.dart';
//引入缓存组件
import '../../tools/keepAliveWrapper.dart';



class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
  late TabController _tabController;

  //生命周期函数：当组件初始化的时候就会触发
  @override
  void initState(){
    super.initState();
    _tabController = TabController(
        length: 8,
        vsync: this
    );
    //监听_tabController改变事件
    _tabController.addListener((){
      //会获取两次
      // print(_tabController.index);
      if(_tabController.animation!.value == _tabController.index){
        //获取点击或滑动页面的索引值
        print(_tabController.index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置AppBar的高度，用PrefenrendSize
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50),
        child: AppBar(
          //底部阴影
          elevation: 3,
          backgroundColor: Colors.white,
          //设置TabBar的高度，用SizeBox在套一层
          title: SizedBox(
            height: 50,
            child: TabBar(

              //isScrollable是否可滚动
              isScrollable: true,
              //指示器颜色及高度
              indicatorColor: Colors.red,
              indicatorWeight: 2,
              indicatorPadding: const EdgeInsets.all(5),
              //大小，默认tab
              // indicatorSize: TabBarIndicatorSize.label,
              //边框
              // indicator: BoxDecoration(
              //   color: Colors.green,
              //   //圆角
              //   borderRadius: BorderRadius.circular(10),
              // ),
              //选中及未选中Lable颜色
              labelColor: Colors.red,
              unselectedLabelColor: Colors.black,
              //样式
              labelStyle: const TextStyle(
                fontSize: 15,
              ),

              //onTap：只能监听点击事件，不能监听滑动事件
              // onTap: (index){
              // },

              //和下面的controller对应，必须数量对应
              controller: _tabController,
              tabs: const[
                Tab(
                  child: Text("关注"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("关注"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("热门"),
                ),
              ],
            ),
          ),
        ),
      ),

      body: TabBarView(
        //和上方controller对应，必须数量对应
        controller: _tabController,
        children:[
          //引入自定义缓存功能
          //就是切换到其他页面的时候，再切回上一个页面，之前所在位置还是原来的
          KeepAliveWrapper(
              child: ListView(
                children: const[
                  ListTile(
                    title: Text("我是关57注列表"),
                  ),
                  ListTile(
                    title: Text("我是关注1列表"),
                  ),
                  ListTile(
                    title: Text("我是关注2列表"),
                  ),
                  ListTile(
                    title: Text("我是关6注列2表"),
                  ),
                  ListTile(
                    title: Text("我是关83注列表"),
                  ),
                  ListTile(
                    title: Text("我是关9注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                  ListTile(
                    title: Text("我是关0注列表"),
                  ),
                ],
              ),
          ),
          Text("我是热门"),
          Text("我是热门"),
          Text("我是热门"),
          Text("我是热门"),
          Text("我是热门"),
          Text("我是热门"),
          Text("我是热门"),
        ],
      ),

    );
  }
}







